import styles from "./sidebar.module.scss";
// 图标
import RoleIcon from "../../icons/role.svg";
import ChatGPTIcon from "../../icons/chatgpt.svg";
import ChatIcon from "../../icons/chat.svg";
import MaxIcon from "../../icons/max.svg";
import MinIcon from "../../icons/min.svg";
import ExitIcon from "../../icons/exit.svg";

import {useNavigate} from "react-router-dom";
import {Path} from "@/app/constants"
import {IconButton} from "@/app/components/button/button";
import {useAppConfig} from "@/app/store/config";
import {useState} from "react";
import evenBusUtils from "@/utils/evenBusUtils";

export function SideBar() {
    const navigate = useNavigate();
    const config = useAppConfig();
    const handleButtonClick = () => {
        setIsSidebarVisible(!isSidebarVisible); // 切换状态（显示/隐藏）
    };

    evenBusUtils.on('isSidebarVisible', (eventData) => {
        // 处理事件
        setIsSidebarVisible(eventData);
    });

    const [isSidebarVisible, setIsSidebarVisible] = useState(false);
    return (
        <div>
            {/*<div>*/}
            {/*    {isSidebarVisible &&*/}
            {/*        <button onClick={handleButtonClick} className={styles["sidebar-button-vi"]}>{">>"}</button>}*/}
            {/*    {!isSidebarVisible &&*/}
            {/*        <button onClick={handleButtonClick} className={styles["sidebar-button-vi"]}>{"<<"}</button>}*/}
            {/*</div>*/}
            <div className={isSidebarVisible ? styles["sidebar-none"] : styles["sidebar"]}>

                <div className={styles["action-button"]}>
                    <IconButton icon={<ExitIcon/>} backgroundColor={"#ff4e4e"} onClick={() => {
                        alert("为实现")
                    }}/>
                    <IconButton icon={<MinIcon/>} backgroundColor={"#f3c910"} onClick={() => {
                        config.update(
                            (config) => (config.tightBorder = false),
                        );
                    }}/>
                    <IconButton icon={<MaxIcon/>} backgroundColor={"#04c204"} onClick={() => {
                        config.update(
                            (config) => (config.tightBorder = true),
                        );
                    }}/>
                </div>


                <div className={styles["sidebar-header"]}>
                    <ChatGPTIcon/>
                </div>

                <div className={styles["sidebar-chat"]}
                     onClick={() => {
                         navigate(Path.Chat)
                     }}
                >
                    <ChatIcon/>
                </div>

                <div className={styles["sidebar-role"]}
                     onClick={() => {
                         navigate(Path.Role)
                     }}
                >
                    <RoleIcon/>
                </div>

            </div>
        </div>
    )
}

